<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			body{
				width: 100%;
				height: 10000000px;
				background-image: url();
				background-size: cover;
				/* 函数  cover   等比例放大图片  特点：原图按照比例放大存背景空间
				【开发者背景图大小是否等于背景空间】
				         contain 等比例缩放图片  特点：图片按照比例缩放存背景空间
						 【开发者背景图大小是否等于背景空间】
						 */
						/* 背景附件--尺寸中存在cover或者contain */
						background-attachment: fixed;/* 背景图固定   scroll   背景图不固定 */
					
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #ffff00;
				background-image: url(img/山水画.png);
				/* 问题：超大图标---不显示   小图--显示
				注意：背景空间大小，如果图小于背景空间--平铺
				 */
				background-repeat: no-repeat;
				/* no-repeat 不平铺：repeat -x，y横纵平铺    */
				background-size: 30%;
				/* 背景尺寸属性值：数值px % |函数 cover contain */
				/* 背景定位：前提背景空间大于背景图  关键字：top、center、right、left、bottom */
				background-position:  100% 0;
			}
			
		</style>
	</head>
	<body>
		<!-- html  img图片   引入一张图片  ，位置不可随意改变
		     css   背景图片  引入一张图片  ，位置可以随意改变
			 子属性  background-color  背景颜色
			         background-image   背景图
					 background-repeat背景重复
					 background-size背景尺寸
					 background-attachment背景附件
					 background-position背景位置
			 复合属性 background：background-image     background-color   background-position    
			                     background-size    background-repeat和 background-attachment
			简写属性 background：background-image     background-position|size
			                                          background-repeat|ttachment
			替代子属性：background-image、background-color、 background-repeat 
			 -->
			 <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat modi blanditiis pariatur amet accusamus dolore, libero voluptatum omnis placeat nulla hic iure numquam ut reprehenderit? Aliquid laboriosam consectetur quam in.
			 Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, excepturi. Facilis blanditiis enim pariatur magnam sint. Ducimus earum itaque minus similique laborum ea! Maiores nihil ipsum unde eum illum architecto.
			 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe doloremque maiores quis molestias quo veniam consequatur accusantium? Nemo dolorem ut aut possimus vel blanditiis deserunt consectetur, adipisci quidem eos nostrum.
			 </div>
	</body> 
</html>